﻿<!DOCTYPE html>
<html>
<head>
    <title>minGrid</title>
    <link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="mingrid.css" rel="stylesheet" type="text/css" />
    <link href="benchmarks.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.6.2.js"></script>
    <script src="jquery-ui-1.8.16.custom.js"></script>
    <script src="mingrid.js"></script>
    <script src="benchmarks.js"></script>
</head>
<body>
    <div>
        <style>
            body
            {
                font-size: 0.6em;
                font-family: Verdana;
            }
            .demo #grid
            {
                font-size: 0.90em;
            }
            button.action
            {
                width: 80px;
            }
            #selectable .ui-selecting
            {
                background: #FECA40;
            }
            #selectable .ui-selected
            {
                background: #F39814;
                color: white;
            }
            #selectable
            {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 60%;
            }
            #selectable li
            {
                margin: 3px;
                padding: 0.4em;
                font-size: 1.0em;
                height: 18px;
                border: 1px solid #aaa;
            }
        </style>
        <script type="text/javascript">


            var grid_width = 400;
            $(function () {

                var data = generateData(100, 10);
                render(data);
                var columns = $("#grid").mingrid("columns");
                var s = new Selectable(columns, data);
           
            });

            var Selectable = function (columns, data) {
                var selectedcolumns = {};
                for (var ord in columns) {
                    $("#selectable").append("<li class='ui-widget-content'>" + columns[ord]['name'] + "</li>");
                }

                var start = function (event, ui) {
                    selectedcolumns = {};
                };
                var selected = function (event, ui) {
                    var text = $(ui['selected']).text();
                    for (var ord in columns) {
                        if (columns[ord]['name'] === text) {
                            selectedcolumns[ord] = columns[ord];
                        }
                    }
                };
                var stop = function (event, ui) {
                    $("#grid").mingrid("load", data, selectedcolumns);
                };

                $("#selectable").selectable({
                    start: start,
                    selected: selected,
                    stop: stop
                });

            };

            var gridLoad = function (event, ui) {
                $("li", "#dropped-columns").remove();
                var droppedcolumns = $("#grid").mingrid("droppedColumns");
                for (var d in droppedcolumns) {
                    $("#dropped-columns").append("<li>" + droppedcolumns[d]['name'] + "</li>");
                }
            };

            function render(data) {
                var columns = {};
                columns = jQuery.ui.mingrid.autoGenerateColumnDefinitions(data[0], "60px");
                $("div.place").append("<div id='grid'></div>");
                $("#grid").mingrid({
                    source: data,
                    width: grid_width,
                    height: 300,
                    columns: columns,
                    autoLayout: true,
                    isDraggable: false,
                    load: gridLoad
                });
            };

            var generateData = (function () {
                var Item = function () { };
                return function (n, m) {
                    var items = [];
                    for (var i = 0; i < n; i++) {
                        var item = new Item();
                        for (var j = 0; j < m; j++) {
                            item["field" + j] = Math.floor(Math.random() * 10000000) / 100;
                        }
                        items.push(item);
                    }
                    return items;
                };
            } ());

            var timeRun = function (fn) {
                var t0 = new Date().getTime();
                fn();
                var time = (new Date().getTime() - t0);
                return time;
            };


        </script>
        <div class='demo'>
            <div>
                <p>
                    This is a demo of the grid with the option autoLayout = true. With autoLayout =
                    true, the rendering strategy is to render all columns at full width, and any columns
                    which don't fit within the grid's width (width option) are not displayed, but the
                    columns' properties are still stored within the widget for later use. Any columns
                    not displayed can be accessed via the grid.droppedColumns function. (Columns are
                    only "dropped" visually, they are not actually deleted from the grid's data source)
                </p>
                <p>
                    This also demonstrates minGrid's flexibility with jQuery UI. Here we use the <a href="http://jqueryui.com/demos/selectable/#event-selected">
                        selectable interaction</a> to select which columns to display. Any columns you
                    select that don't fit within the grid's width are not displayed and shown under
                    "columns not visible".
                </p>
                <p>
                    To specify which columns to display, call the minGrid <em>load</em> method.
                </p>
                <label>
                    code:</label>
                <p>
                    <pre class='brush:js'>
                //create the grid:
                  $("#grid").mingrid({
                    source: data,
                    width: grid_width,
                    height: 300,
                    columns: columns,
                    autoLayout: true,
                    isDraggable: false,
                    load: gridLoad
                });

                //specify the columns to display or load the grid with updated data e.g. from AJAX.
                 $("#grid").mingrid("load", data, selectedcolumns);
                </pre>
                </p>
            </div>
            <div>
                <table style='width:100%' >
                    <tbody>
                        <tr>
                            <td style='width:70%' >
                                <label for='column-select'>
                                    select columns (drag the mouse over):</label>
                                <ul id='selectable'>
                                </ul>
                            </td>
                            <td style='vertical-align:top' >
                                <label>
                                    columns not visible:</label>
                                <ul id='dropped-columns'>
                                </ul>                                
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class='place'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
